<template>
	<div id="userInfoPage">
			<!--<div class="title"><i class="iconfont icon-icon1"></i>欢迎来到全宇支付平台</div>-->
		<!--&lt;!&ndash;实线&ndash;&gt;-->
		<!--<div class="solid"></div>-->
    <div class="flex_head">
      <div class="solid"></div>
      <div class="item_two">
        <h3>个人信息</h3>
      </div>
    </div>
    <div class="infoHead flex">
      <div class="item item1"></div>
      <div class="item item2">
        <div class="line" style="font-weight: bold">说明：</div>
        <div class="line">为保障客户权益，个人信息页面不可修改，若要修改，请联系客服。咨询电话028-62778877-8276</div>
      </div>

    </div>
		<div class="main">
			<div class="section_left">
			<el-form :label-position="labelPosition" label-width="80px">
			<el-form-item label="用户名">
				<el-input v-model="userInfo.username" readonly placeholder="暂无用户名"></el-input>
			</el-form-item>
			<el-form-item label="账号状态">
				<el-input v-model="userInfo.status" readonly placeholder="暂无账号状态"></el-input>
			</el-form-item>
			<el-form-item label="手机号码">
				<el-input v-model="userInfo.phone" readonly placeholder="暂无手机号码"></el-input>
			</el-form-item>
				<el-form-item label="联系邮箱">
				<el-input v-model="userInfo.email" readonly placeholder="暂无邮箱地址"></el-input>
			</el-form-item>

				<el-form-item label="创建时间">
				<el-input v-model="userInfo.createTime" readonly placeholder="暂无创建时间"></el-input>
			</el-form-item>
		</el-form>
		</div>
		<div class="section_right">
			<el-form :label-position="labelPosition" label-width="80px">
			<el-form-item label="银行卡号">
				<el-input v-model="userInfo.cardNo" readonly placeholder="暂无银行卡号"></el-input>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input v-model="userInfo.name" readonly placeholder="暂无姓名"></el-input>
			</el-form-item>
			<el-form-item label="身份证">
				<el-input v-model="userInfo.idCard" readonly placeholder="暂无身份证"></el-input>
			</el-form-item>
		</el-form>
		</div>
		</div>

	</div>
</template>

<script>
  import dateformat from 'dateformat'
	export default {
		data () {
			return {
				labelPosition: 'right',
        userInfo:{}
			}
		},
		created() {
      this.getUserInfo()
		},
		methods: {
      getUserInfo(){
        this.$api.getUserInfo().then(res =>{
          if(res.code == '000000'){
            console.log(res.data);
            this.userInfo = res.data;
            let date = new Date(this.userInfo.createTime);
            this.userInfo.createTime  = dateformat(date,'yyyy-mm-dd HH:MM')

          }
        })
      },
//      getQueryEmail(){
//        this.$api.getQueryEmail().then(res =>{
//          if(res.code == '000000'){
//            console.log(res.data);
//            if(res.data){
//              this.form.email = res.data
//            }
//          }else{
//
//          }
//        }).catch()
//      }
		}
	}
</script>

<style lang="less">
#userInfoPage{
	.icon-icon1 {
    font-size: 35px!important;
    margin-right: 35px;
    position: absolute;
    color: #008000;
    right: 100px;
    bottom: -8px;
}
	.title {
			text-align: right;
			font-size: 12px;
			margin-bottom: 10px;
			position: relative;
		}
		.icon-icon1{
			font-size: 25px;
		}

	.main{
		display: flex;
	justify-content: space-around;
	.section_left{
		width: 40%;
		padding: 20px;
	}
	.section_right{
		width: 40%;
		padding: 20px;
	}
	}
   .infoHead{
     height: 90px;
     .item1{
       width: 3px;
       height: 100%;
       background-color: #ffbd30;
     }
     .item2{
       flex: 1;
       background-color: #fffde6;
     }
     .line{
       padding-left: 50px;
       line-height: 45px;
       text-align: left;
       font-size: 15px;
     }

   }
}
</style>
